<template>
	<div class="fortress-region-checked">
		<slot :open="onOpen" :province="province" :city="city" :area="area" :value="inputNames">
			<el-input
				type="textarea"
				:autosize="{ minRows: 1, maxRows: +maxRows }"
				readonly
				:placeholder="placeholder"
				@click.native="onOpen"
				:model-value="inputNames"
			></el-input>
		</slot>
		<el-dialog title="选择区域" v-model="visible" append-to-body lock-scroll draggable destroy-on-close>
			<div class="region-content">
				<div class="province">
					<div class="title">省份</div>
					<div class="region-main">
						<div
							class="region-item"
							:class="{ active: provinceActive.id === item.id }"
							v-for="item in regionList"
							:key="item.id"
							@click="onProvinceCheckActive(item)"
						>
							{{ item.name }}
							<el-checkbox
								:model-value="provinceCheckedIds.includes(item.id)"
								@change="onProvinceCheckChange(item)"
								@click.stop.native
							></el-checkbox>
						</div>
					</div>
				</div>
				<div class="city">
					<div class="title">城市</div>
					<div class="region-main">
						<div
							class="region-item"
							:class="{ active: cityActive.id === item.id }"
							v-for="item in cityList"
							:key="item.id"
							@click="onCityCheckActive(item)"
						>
							{{ item.name }}
							<el-checkbox
								:model-value="cityCheckedIds.includes(item.id)"
								@change="onCityCheckChange(item)"
								@click.stop.native
							></el-checkbox>
						</div>
					</div>
				</div>
				<div class="area">
					<div class="title">区</div>
					<div class="region-main">
						<div
							class="region-item"
							:class="{ active: areaActive.id === item.id }"
							v-for="item in areaList"
							:key="item.id"
							@click="onAreaCheckActive(item)"
						>
							{{ item.name }}
							<el-checkbox
								:model-value="areaCheckedIds.includes(item.id)"
								@change="onAreaCheckChange(item)"
								@click.stop.native
							></el-checkbox>
						</div>
					</div>
				</div>
			</div>
			<template #footer>
				<el-button type="danger" @click="onClose">取消</el-button>
				<el-button type="primary" @click="onConfirm">确定</el-button>
			</template>
		</el-dialog>
	</div>
</template>

<script setup>
import { useDictStore } from "/store/dict"

const props = defineProps({
	placeholder: {
		type: String,
		default: "请选择...",
	},
	multiple: {
		type: Boolean,
		default: false,
	},
	maxRows: {
		type: [Number, String],
		default: 1,
	},
	modelValue: {
		type: [Object],
		default: () => ({}),
	},
})

const emits = defineEmits(["update:modelValue", "change"])

const dictStore = useDictStore()

const visible = ref(false)
const regionList = ref([])
const province = ref([])
const city = ref([])
const area = ref([])
const provinceActive = ref({})
const cityActive = ref({})
const areaActive = ref({})
const inputNames = ref("")

const provinceCheckedIds = computed(() => province.value.map(item => item.id))
const cityList = computed(() => provinceActive.value.children || [])
const cityCheckedIds = computed(() => city.value.map(item => item.id))
const areaList = computed(() => cityActive.value.children || [])
const areaCheckedIds = computed(() => area.value.map(item => item.id))

async function getRegion() {
	regionList.value = await dictStore.getDict("/system/sysRegion/tree")
}
getRegion()

function onOpen() {
	visible.value = true
	if (typeof props.modelValue === "object") {
		province.value = props.modelValue.province || []
		city.value = props.modelValue.city || []
		area.value = props.modelValue.area || []
	}
}
function onClose() {
	visible.value = false
}
function onConfirm() {
	visible.value = false
	inputNames.value = city.value.map(item => item.name).join(";") + ";" + area.value.map(item => item.name).join(";")
	emits("update:modelValue", {
		province: province.value,
		city: city.value,
		area: area.value,
	})
	emits("change", {
		province: province.value,
		city: city.value,
		area: area.value,
	})
}

function onProvinceCheckActive(item) {
	provinceActive.value = item
	cityActive.value = {}
	areaActive.value = {}
}
function onProvinceCheckChange(item) {
	const itemCity = item.children || []
	const itemArea = []
	itemCity.forEach(item => {
		if (item.children) itemArea.push(...item.children)
	})

	if (provinceCheckedIds.value.includes(item.id)) {
		province.value = province.value.filter(i => i.id !== item.id)
		city.value = city.value.filter(i => !itemCity.map(item => item.id).includes(i.id))
		area.value = area.value.filter(i => !itemArea.map(item => item.id).includes(i.id))
	} else {
		province.value.push(item)
		city.value.push(...itemCity)
		area.value.push(...itemArea)
	}
}
function onCityCheckActive(item) {
	cityActive.value = item
	areaActive.value = {}
}
function onCityCheckChange(item) {
	const itemProvince = regionList.value.find(i => i.id === item.parentId)
	const itemArea = item.children || []

	if (!provinceCheckedIds.value.includes(itemProvince.id)) {
		province.value.push(itemProvince)
	}

	if (cityCheckedIds.value.includes(item.id)) {
		city.value = city.value.filter(i => i.id !== item.id)
		area.value = area.value.filter(i => !itemArea.map(item => item.id).includes(i.id))
	} else {
		city.value.push(item)
		area.value.push(...itemArea)
	}
}
function onAreaCheckActive(item) {
	areaActive.value = item
}
function onAreaCheckChange(item) {
	const itemCity = cityList.value.find(i => i.id === item.parentId)
	if (!cityCheckedIds.value.includes(itemCity.id)) {
		city.value.push(itemCity)
	}
	if (areaCheckedIds.value.includes(item.id)) {
		area.value = area.value.filter(i => i.id !== item.id)
	} else {
		area.value.push(item)
	}
}

watch(
	() => props.modelValue,
	() => {
		if (typeof props.modelValue === "object") {
			province.value = props.modelValue.province || []
			city.value = props.modelValue.city || []
			area.value = props.modelValue.area || []

			if (province.value.length + city.value.length + area.value.length > 0) {
				inputNames.value =
					city.value.map(item => item.name).join(";") + ";" + area.value.map(item => item.name).join(";")
			} else {
				inputNames.value = ""
			}
		}
	},
	{
		immediate: true,
		deep: true,
	}
)
</script>

<script>
export default {
	name: "fortress-region-checked",
}
</script>
